import type React from 'react';
import './index.scss'
import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
import type { UploadProps  } from 'antd';
import { message,Upload,Image, Tooltip, Dropdown } from 'antd';
import {FileMarkdownOutlined,FilePdfOutlined,FilePptOutlined,FileTextOutlined,FileWordOutlined,FileZipOutlined,VideoCameraOutlined} from '@ant-design/icons';
import http from '../../utils/http';
import api from '../../api';
import { useAppSelector } from '../../utils/storeHook/storeHook';
import { emojiList } from '../../utils';

const fileIcon = {
    md:<FileMarkdownOutlined />,
    pdf:<FilePdfOutlined />,
    ppt:<FilePptOutlined />,
    txt:<FileTextOutlined />,
    word:<FileWordOutlined />,
    zip:<FileZipOutlined />,
    video:<VideoCameraOutlined />,
}

type TextInputProps = {
  disabled?: boolean;  // 新增禁用状态标志
  onChange: Function,
  mensionVal?:MensionT,
  channel_id?:string,
  direct_chat_id?:string,
  actions: string[], // 允许的行为(表情、图片、文件、录音)
}

interface AttachmentT {
    file_id: string;
    file_url: string;
    file_name?: string;
    width?: number;
    height?: number;
    size: number;
    mime_type: string;
    alt_text?: string;
    time?: string;
}

interface recorder{
    file_id: string;
    file_url: string;
    file_name: string;
    size: number;
    mime_type: string;
    duration: number;
}

interface MensionT {
    id: string;
    name: string;
}

interface messageInpT {
    text: string;
    attachments?: AttachmentT[];
    mention?:MensionT,
    recorder?:recorder
}

interface localMsgT{
    text: string,
    imageList: AttachmentT[],
    fileList: AttachmentT[]
}

export interface TextInputRef{
    clearInput: ()=>void;
}

const TextInput = forwardRef(({ disabled = false,onChange,mensionVal,channel_id,direct_chat_id,actions=[]}: TextInputProps,ref)=>{
    useImperativeHandle(ref,()=>{
        return {clearInput}
    })
    
    const [messageApi, contextHolder] = message.useMessage();

    const [text,setText] = useState<string>('')
    const [imageList,setImageList] = useState<AttachmentT[]>([])
    const [fileList,setFileList] = useState<AttachmentT[]>([])
    const [fileTasks, setFileTasks] = useState<{[key: string]: {progress: number, file: File}}>({});

    const actChannelId = useAppSelector(state=>state.channel.actChannelId)
    const actServerId = useAppSelector(state=>state.channel.actServerId)

    const [emojiVis,setEmojiVis] = useState(false)
    const emojiRef = useRef<HTMLDivElement>(null);

    const inputRef = useRef<HTMLDivElement>(null);


    // 录音
    const mediaRecorderRef = useRef<MediaRecorder | null>(null);
    const audioChunksRef = useRef<Blob[]>([]);
    const [isRecording,setIsRecording] = useState<boolean>(false)
    const recorderingTime= useRef<number>(0)
    const recorderTimer = useRef<NodeJS.Timeout|null>(null)

    // 启动文件上传
    const startFileUpload = async (file: File,type:string) => {
        // const taskId = uuidv4(); // 生成唯一任务ID
        const taskId = 6746546513
        const CHUNK_SIZE = 5 * 1024 * 1024;
        
        setFileTasks(prev => ({
            ...prev,
            [taskId]: { file, progress: 0 }
        }));
        
        try {
            // 1. 初始化上传
            const initRes = await http.post(api.file.init_upload, {
                file_name: file.name,
                size: file.size,
                mime_type: file.type,
                total_chunks: Math.ceil(file.size / CHUNK_SIZE),
            });
            
            const serverTaskId = initRes.data.task_id;
            
            // 2. 上传所有分片
            const chunks = createFileChunks(file, CHUNK_SIZE);
            let uploaded = 0;
            
            for (let i = 0; i < chunks.length; i++) {
                const formData = new FormData();
                formData.append('task_id', serverTaskId);
                formData.append('chunk_index', i.toString());
                formData.append('chunk', chunks[i].chunk);
                
                await http.post(api.file.upload_chunk, formData, {
                    headers: { 'Content-Type': 'multipart/form-data' },
                });
                console.log(fileTasks);
                
                // 更新进度
                uploaded++;
                const progress = Math.floor((uploaded / chunks.length) * 100);
                setFileTasks(prev => ({
                    ...prev,
                    [taskId]: {...prev[taskId], progress}
                }));
            }
            
            // 3. 完成上传
            const completeRes = await http.post(api.file.complete_upload, {
                task_id: serverTaskId,
                channel_id: channel_id,
                direct_chat_id: direct_chat_id
            });
            
            const fileInfo = completeRes.data;
            // onFileChange && onFileChange(fileInfo);
            
            // 添加到已完成列表
            if(type == 'image'){
                setImageList(prev => [
                    ...prev,
                    {
                        file_id: fileInfo.file_id, // 使用file_id作为uid
                        file_name: fileInfo.file_name,
                        file_url: fileInfo.file_url,
                        mime_type: fileInfo.mime_type,
                        size: fileInfo.size,
                    }
                ]);
            }else if(type == 'recorder'){
                const item:messageInpT = {
                    text: '',
                    attachments:[],
                    mention:mensionVal,
                    recorder:{...fileInfo,duration:recorderingTime.current},
                }
                onChange(item)
            }else{
                setFileList(prev=>[...prev,fileInfo]);
            }
            
        
        } catch (err) {
            messageApi.error('上传失败: ');
        } finally {
        // 清理任务
            setFileTasks(prev => {
                const newTasks = {...prev};
                delete newTasks[taskId];
                return newTasks;
            });
        }
    };

    // 创建文件分片
    const createFileChunks = (file: File, chunkSize: number) => {
        const chunks = [];
        let start = 0;
        
        while (start < file.size) {
            const end = Math.min(start + chunkSize, file.size);
            const chunk = file.slice(start, end);
            chunks.push({
                index: chunks.length,
                chunk
            });
            start = end;
        }
        
        return chunks;
    };

    // 上传图片
    const imgProps: UploadProps = {
        beforeUpload: (file) => {
            const max_size = 1024 * 1024 * 5
            const arrowType = ['png','jpeg','gif','jpg','webp','svg']
            let isPNG = false
            for(let key of arrowType){
                if(file.type.includes(key)){
                    isPNG = true
                    break
                }
            }
            if (!isPNG) {
                messageApi.error(`${file.name}不是图片文件`);
                return false || Upload.LIST_IGNORE
            }
            
            if(file.size > max_size){
                messageApi.error(`${file.name}文件过大:大于${max_size/1024/1024}MB`);
                return false || Upload.LIST_IGNORE;
            }
            startFileUpload(file,'image')
            return false || Upload.LIST_IGNORE;
        },
    };

    // 上传文件
    const fileProps: UploadProps = {
        beforeUpload: (file) => {
            const max_size = 1024 * 1024 * 20
            const arrowType = [
                // 文档类
                'text/plain',               // .txt
                'application/pdf',          // .pdf
                'application/msword',       // .doc
                'application/vnd.openxmlformats-officedocument.wordprocessingml.document', // .docx
                'application/vnd.ms-powerpoint', // .ppt
                'application/vnd.openxmlformats-officedocument.presentationml.presentation', // .pptx
                'application/vnd.ms-excel', // .xls
                'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', // .xlsx
                'text/csv',                 // .csv
                'text/markdown',            // .md
                'application/vnd.xmind.workbook', // .xmind
                
                // 压缩文件类
                'application/zip',          // .zip
                'application/x-zip-compressed',
                'application/x-rar-compressed', // .rar
                'application/x-7z-compressed', // .7z
                'application/x-tar',        // .tar
                'application/gzip',         // .gz
                'application/x-bzip2',      // .bz2
                
                // 视频类
                'video/mp4',
                'video/mpeg',
                'video/quicktime',          // .mov
                'video/x-msvideo',          // .avi
                'video/x-matroska',         // .mkv
                'video/x-flv',              // .flv
                'video/webm',
                
                // 音频类
                'audio/mpeg',               // .mp3
                'audio/wav',
                'audio/ogg',
                'audio/x-m4a',
                'audio/aac',
            ]
            let isFileType = false
            
            for(let key of arrowType){
                if(file.type === key){
                    isFileType = true
                    break
                }
            }
            if (!isFileType) {
                messageApi.error(`${file.name}文件类型错误:${file.type}不允许`);
                return false || Upload.LIST_IGNORE
            }
            
            if(file.size > max_size){
                messageApi.error(`${file.name}文件过大:大于${max_size/1024/1024}MB`);
                return false || Upload.LIST_IGNORE;
            }
            startFileUpload(file,'file')
            
            return false || Upload.LIST_IGNORE;
        },
    };

        // 移除文件
    const handleRemoveImage = (uid: string,type:string) => {
        http.post(api.file.deleteFile,{file_id:uid}).then(()=>{
            if(type==='image'){
                setImageList(imageList.filter(file => file.file_id !== uid));
            }else{
                setFileList(fileList.filter(file => file.file_id !== uid));
            }
        })
    };
    const downloadFile = (url:string) => {
        // 创建下载链接
        window.open(url);
    };

    function handleMessageChange(e:React.ChangeEvent<HTMLDivElement>){
        setText(e.target.innerText)
    }

    function handlePaste(e:React.ClipboardEvent){
        e.preventDefault();
        const text = e.clipboardData.getData('text/plain');
        // document.execCommand('insertHTML', false, text);
        setText(prev=>prev + text)
    }

    function handleKeyDown(e:React.KeyboardEvent<HTMLDivElement>){
        if(e.code == 'Enter'){
            e.preventDefault()
            const item:messageInpT = {
                text: text,
                attachments:[
                    ...imageList,
                    ...fileList,
                ],
                mention:mensionVal
            }
            
            if(text.trim()){
                onChange(item)
            }
        }
        if(e.code == 'Space'){

        }
        
    }

    function setLocalMessage(){
        const item = {
            text: text,
            imageList: imageList,
            fileList: fileList
        }
        localStorage.setItem(actChannelId+'msg', JSON.stringify(item))
    }

    function clearInput(){
        setText('')
        setFileList([])
        setImageList([])
    }

    // 请求权限
    async function prepareRecorder(){
        try{
            const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
            return stream
        }catch(error){
            console.error('无法获取媒体流:', error);
            return null
        }
    }

    async function startRecording(){
        const stream = await prepareRecorder()
        if(!stream) return
        mediaRecorderRef.current = new MediaRecorder(stream);

        mediaRecorderRef.current.ondataavailable = (event) => {
            audioChunksRef.current.push(event.data);
        }

        mediaRecorderRef.current.onstop = () => {
            
            // 创建音频Blob和URL
            const audioBlob = new Blob(audioChunksRef.current, { type: 'audio/wav' });
            
            // 转换为File对象
            const audioFile = new File([audioBlob], `recording${new Date().toISOString().slice(0, 19)}.wav`, {
                type: 'audio/wav',
                lastModified: Date.now()
            });
            
            if(recorderTimer.current) clearInterval(recorderTimer.current)
            
            startFileUpload(audioFile,'recorder')

            // 释放流资源
            stream.getTracks().forEach(track => {
                track.stop()
            });
        }

        audioChunksRef.current = []
        setIsRecording(true)
        recorderingTime.current = 0
        if (recorderTimer.current) clearInterval(recorderTimer.current);
        recorderTimer.current = setInterval(() => { 
            recorderingTime.current += 100
        }, 100);
        mediaRecorderRef.current.start();
    }

    function stopRecording(){ 
        if (!isRecording || !mediaRecorderRef.current) return;
        mediaRecorderRef.current.stop();
        setIsRecording(false)
    }

    function useEmoji(emoji:string){
        if(inputRef.current){
            setText(text => text + emoji)
        }
    }

    function openEmojiPopup(){
        setEmojiVis(true)
        setTimeout(()=>{
            if(emojiRef.current){
                emojiRef.current.focus()
            }
        },1)
    }

    // function handleBold(){
    //     if (disabled || !inputRef.current) return;

    //     // 方法1: 使用传统 execCommand (简单但已废弃)
    //     // document.execCommand('bold', false, null);
        
    //     // 方法2: 现代 Selection/Range API (推荐)
    //     const selection = window.getSelection();
    //     if (!selection || selection.rangeCount === 0) return;

    //     const range = selection.getRangeAt(0);
        
    //     // 创建或移除加粗样式
    //     let span = document.createElement('span');
    //     span.style.fontWeight = 'bold';
        
    //     if (range.toString() === '') {
    //     // 没有选中文本，插入新的加粗文本
    //     const textNode = document.createTextNode('加粗文本');
    //     span.appendChild(textNode);
    //     range.insertNode(span);
    //     range.setStartAfter(span);
    //     } else if (range.commonAncestorContainer.nodeName === 'SPAN') {
    //     // 如果已经是加粗文本，则移除加粗
    //     const parent = range.commonAncestorContainer.parentElement;
    //     if (parent && parent.style.fontWeight === 'bold') {
    //         const text = document.createTextNode(range.toString());
    //         range.deleteContents();
    //         range.insertNode(text);
    //     }
    //     } else {
    //     // 应用加粗到选中文本
    //     span.appendChild(range.extractContents());
    //     range.insertNode(span);
    //     }

    //     // 清除并恢复选区
    //     selection.removeAllRanges();
    //     selection.addRange(range);

    //     // 聚焦编辑器
    //     inputRef.current.focus();
        
    //     // 触发内容变更回调
    //     if (inputRef.current.innerHTML) {
    //         handleMessageChange({
    //             target: inputRef.current 
    //         } as React.ChangeEvent<HTMLDivElement>);
    //     }
    // }

    useEffect(()=>{
        const defaultMsg = {
            text: '',
            imageList: [],
            fileList: []
        }
        const data = localStorage.getItem(actChannelId+'msg')
        
        const localMsg: localMsgT = data ? JSON.parse(data) : defaultMsg
        setText(localMsg.text)
        setImageList(localMsg.imageList)
        setFileList(localMsg.fileList)
        
    },[actChannelId,actServerId])

    useEffect(()=>{
        setLocalMessage()
    },[text,imageList,fileList])

    useEffect(()=>{
        if(inputRef.current){
            inputRef.current.textContent = text
            // 创建范围对象
            const range = document.createRange();
            // 选择元素内的所有内容
            range.selectNodeContents(inputRef.current);
            // 折叠范围到末尾
            range.collapse(false);
            
            // 获取当前选区并更新
            const selection = window.getSelection();
            selection?.removeAllRanges();
            selection?.addRange(range);
        }
    },[text])
    
    useEffect(()=>{ 
        if(inputRef.current){
        }
        return () => {
            if (recorderTimer.current) clearInterval(recorderTimer.current);
        };
    },[])
    return (
        <>
            {contextHolder}
            <div className={`textInput_box ${disabled ? 'disabled' : ''}`}>
                <div className="textInput">
                    {imageList.length >0 &&<div className='textInput_imgList'>
                        <div className="imgList_container">
                            {imageList.map(file => (
                                <div 
                                    key={file.file_id} className="textInput_imgItem"
                                >
                                    <Image
                                        src={file.file_url}
                                        height={'100%'}
                                        width={'100%'}
                                        // fallback={errImg}
                                    />
                                    <div 
                                        className='textInput_imgDelete' 
                                        onClickCapture={(e)=>{
                                            e.stopPropagation()
                                            handleRemoveImage(file.file_id,'image')}}
                                    >
                                        <svg fillRule="evenodd" viewBox="64 64 896 896" focusable="false" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                                            <path d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"></path>
                                        </svg>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>}
                    {fileList.length>0&&<div className='textInput_fileList'>
                        <div className='fileList_container'>
                            {fileList.map(file=>
                            <div 
                                className='textInput_fileList_item'
                                onClick={()=>downloadFile(file.file_url)}
                                key={file.file_id}
                            >
                                <div className='textInput_fileList_item_left'>
                                    <span >{fileIcon.md}</span>
                                    <span >{file.file_name}</span>
                                </div>
                                <span 
                                    className='textInput_fileList_item_del'
                                    onClickCapture={(e)=>{
                                        e.stopPropagation()
                                        handleRemoveImage(file.file_id,'file')
                                    }}
                                >
                                    <svg fillRule="evenodd" viewBox="64 64 896 896" focusable="false" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                                        <path d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"></path>
                                    </svg>
                                </span>
                            </div>)}
                        </div>
                    </div>}
                    <div className='textInput_inputArea'>
                        {/* <textarea 
                            name="textInput" 
                            placeholder={disabled ? '您已被禁言' : '发送消息...'}
                            readOnly={disabled}  // 禁用状态下不可编辑
                            onChange={(e)=>handleMessageChange(e)}
                            value={text}
                            onKeyDown={(e)=>handleKeyDown(e)}
                        ></textarea> */}
                        <div 
                            className='textInput_input_box' 
                            contentEditable={!disabled}
                            data-placeholder={disabled ? '您已被禁言' : '发送消息...'}
                            onInput={handleMessageChange}
                            onKeyDown={(e)=>handleKeyDown(e)}
                            onPaste={handlePaste}
                            ref={inputRef}
                        ></div>
                        {actions.length > 0 &&
                        <div className={`textInput_actions ${disabled ? 'disabled' : ''}`}>
                            {/* 禁用状态下按钮不可操作 */}
                            {actions.includes('emotion')&&<Tooltip title="表情">
                                <Dropdown 
                                    menu={{}}
                                    destroyOnHidden={true}
                                    open={emojiVis}
                                    placement="top"
                                    popupRender={() => (
                                        <div 
                                            className="emoji_popup"
                                            ref={emojiRef}
                                            tabIndex={0}
                                            onBlur={() => setEmojiVis(false)}
                                        >
                                            <div className='emoji_box'>
                                                {emojiList.map(emoji=>
                                                    <div 
                                                        className='emoji_item' 
                                                        onClick={()=>useEmoji(emoji.emoji)}
                                                        key={emoji.code}
                                                    >
                                                            {emoji.emoji}
                                                    </div>
                                                )}
                                            </div>
                                        </div>
                                    )}
                                >
                                    <div 
                                        className="textInput_action" 
                                        style={{ pointerEvents: disabled ? 'none' : 'auto' }}
                                        onClick={openEmojiPopup}
                                    >
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.5"/>
                                            <circle cx="9" cy="10" r="1.25" fill="currentColor"/>
                                            <circle cx="15" cy="10" r="1.25" fill="currentColor"/>
                                            <path d="M9 15C9 15 10.8 17 12 17C13.2 17 15 15 15 15" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
                                        </svg>
                                    </div>
                                </Dropdown>
                            </Tooltip>}
                            {actions.includes('picture')&&<Tooltip title="图片">
                                <Upload {...imgProps}>
                                    <div
                                        className="textInput_action" 
                                        style={{ pointerEvents: disabled ? 'none' : 'auto' }}
                                    >
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <rect x="5" y="6" width="14" height="12" rx="1" stroke="currentColor" strokeWidth="1.5"/>
                                            <circle cx="10" cy="10" r="2.25" stroke="currentColor" strokeWidth="1.5"/>
                                            <path d="M5 18L8 15L12 18L16 14L19 18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                                        </svg>
                                    </div>
                                </Upload>
                            </Tooltip>}
                            {actions.includes('file')&&<Tooltip title="文件">
                                <Upload {...fileProps}>
                                    <div
                                        className="textInput_action" 
                                        style={{ pointerEvents: disabled ? 'none' : 'auto' }}
                                    >
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <rect x="5" y="4" width="14" height="16" rx="1" stroke="currentColor" strokeWidth="1.5"/>
                                            <line x1="8" y1="9" x2="16" y2="9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
                                            <line x1="8" y1="12" x2="16" y2="12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
                                            <line x1="8" y1="15" x2="13" y2="15" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
                                        </svg>
                                    </div>
                                </Upload>
                            </Tooltip>}
                            {actions.includes('recorder')&&(!isRecording?<Tooltip title="录音">
                                <div
                                    className="textInput_action" 
                                    style={{ pointerEvents: disabled ? 'none' : 'auto' }}
                                    onClick={()=>startRecording()}
                                >
                                    {/* <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12 16C14.2091 16 16 14.2091 16 12V6C16 3.79086 14.2091 2 12 2C9.79086 2 8 3.79086 8 6V12C8 14.2091 9.79086 16 12 16Z" fill="currentColor"/>
                                        
                                        <path d="M5 10V12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12V10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                        
                                        <g className="sound-waves" opacity="0">
                                            <path d="M3 12H5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                            <path d="M1 9H3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                            <path d="M1 15H3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                            <path d="M19 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                            <path d="M21 9H23" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                            <path d="M21 15H23" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                        </g>
                                    </svg> */}
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                        <path fill='currentColor' d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"/>
                                    </svg>
                                </div>
                            </Tooltip>:
                            <Tooltip title="结束录音">
                                <div
                                    className="textInput_action" 
                                    style={{ pointerEvents: disabled ? 'none' : 'auto' }}
                                    onClick={()=>stopRecording()}
                                >
                                    <div className="pulsating-dot"></div>
                                </div>
                            </Tooltip>)}
                        </div>
                        }
                    </div>
                </div>
            </div>
        </>
    )
})

export default TextInput;